<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery"  :label-width="120">
            <Row  class="query-form" >
                <Col span="8">
                    <FormItem label="二级集团：" prop="belongOrgId">
                        <Select class="query-form-el" placeholder="集团名称"  v-model='dataToQuery.belongOrgId'>
                            <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年度：" prop="year" >
                        <DatePicker class="query-form-el" type="year" v-model="dataToQuery.year1" :clearable="false"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true,88)" class="ivu-btn-switch" type="text"  >展开∨</Button>
                    <Button @click="reset1" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label="评价内容：" prop="content" >
                        <Input class="query-form-el" type="text" v-model="dataToQuery.content"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="评分项目：" prop="project">
                        <Select class="query-form-el" filterable v-model="dataToQuery.project">
                            <Option v-for="item in projectList" :value="item" :key="item">
                                {{item}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="评分标准：" prop="standard" >
                        <Input class="query-form-el" type="text" v-model="dataToQuery.standard"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="行业分类：">
                        <Select class='query-form-el' placeholder="请选择行业分类"  v-model='dataToQuery.industryName'>
                            <!--<Option v-for="item in dictMap['env-00006']" :value="item.codingCodeId" :key="item.codingCodeId" >{{ item.codingName }}</Option>-->
                            <Option v-for="item in industryNames" :value="item" :key="item">{{item}}</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8" offset="16">
                    <Button @click="switchQuery(false,88)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <!--<Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>-->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal :title="mode ==='view'? '环境标准化详情':'环境标准化'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'517px'}"  class-name='limit-height-dialog' >
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?100:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='二级集团：' prop='belongOrgId'>
                                    <div v-if="mode === 'view'">{{dataToView.belongOrgName}}</div>
                                    <Select v-else class='w' placeholder="集团名称"  v-model='dataToView.belongOrgId' label-in-value @on-change="belongChange">
                                        <Option v-for="item in twoLevel" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="年度：" prop="yearDate" >
                                    <div v-if="mode === 'view'">{{dataToView.year}}</div>
                                    <DatePicker v-else class='w' type="year" placeholder="请输入" :clearable="false" v-model="dataToView.yearDate"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="评价项目：" prop="project" >
                                    <div v-if="mode === 'view'">{{dataToView.project}}</div>
                                    <Input v-else  type="text" v-model="dataToView.project" ></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="行业分类：">
                                    <div v-if="mode === 'view'">{{dataToView.industryName}}</div>
                                    <Select v-else class='w' placeholder="请选择行业分类" type='text' v-model='dataToView.industryName'>
                                        <!--<Option v-for="item in dictMap['env-00006']" :value="item.codingCodeId" :key="item.codingCodeId" >{{ item.codingName }}</Option>-->
                                        <Option v-for="item in industryNames" :value="item" :key="item">{{item}}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7" >
                                <FormItem label="序号：" prop="seqNo">
                                    <div v-if="mode === 'view'">{{dataToView.seqNo}}</div>
                                    <Input v-else  type="text" v-model="dataToView.seqNo" ></Input>
                                </FormItem>
                            </Col>
                            <Col span="7" >
                                <FormItem label="分值：" prop="score">
                                    <div v-if="mode === 'view'">{{dataToView.score}}</div>
                                    <Input v-else  type="text" v-model="dataToView.score" ></Input>
                                </FormItem>
                            </Col>
                            <Col span="7" >
                                <FormItem label="评价项目排序：" prop="num">
                                    <div v-if="mode === 'view'">{{dataToView.num}}</div>
                                    <Input v-else  type="text" v-model="dataToView.num" ></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="评价内容：" prop="content" >
                                    <div v-if="mode === 'view'">{{dataToView.content}}</div>
                                    <Input v-else  v-model="dataToView.content" type="textarea" :autosize="{minRows:2,maxRows:6}"  />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="评分标准：" prop="standard" >
                                    <div v-if="mode === 'view'">{{dataToView.standard}}</div>
                                    <Input v-else  v-model="dataToView.standard" type="textarea" :autosize="{minRows:2,maxRows:6}"  />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="扣分说明：">
                                    <div v-if="mode === 'view'">{{dataToView.pointsDeduction}}</div>
                                    <Input v-else  v-model="dataToView.pointsDeduction" type="textarea" :autosize="{minRows:2,maxRows:6}"  />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="评价依据："  >
                                    <div v-if="mode === 'view'">{{dataToView.evaluationBasis}}</div>
                                    <Input v-else  v-model="dataToView.evaluationBasis" type="textarea" :autosize="{minRows:2,maxRows:6}"  />
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" :loading="pageStatus.sending" class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        name: "enStd",
        components:{
            cascaderDom
        },
        data(){
            return{
                ...this.createCommonDataField(),
                columns1: [
                    {title: '', width: 80, align: 'center', fixed: 'left', key:'seqNo', render: pageCommonFunction.indexColumnsRender.bind(this)},
                    {title: '序号', width: 80, align: 'center', key:'seqNo',},
                    {title: '二级集团', width: 240, align: 'center', key:'belongOrgName',},
                    {title: '年度', align: 'center', key:'year', minWidth: 90,},
                    {title: '行业分类', width: 120, align: 'center', key:'industryName', tooltip:true},
                    {title: '评价项目排序', width: 80, align: 'center', key:'num',},
                    {title: '评价项目', width: 150, align: 'center', key:'project',},
                    {title: '评价内容', minWidth:230, align: 'left', key:'content', tooltip:true},
                    {title: '分值', width: 80, align: 'center', key:'score',},
                    {title: '评分标准', width: 380, align: 'left', key:'standard', tooltip:true},
                    {title: '创建时间', width: 120, align: 'center', key:'createDate', render: this.renderCellDate},
                    this.getActionColumns()
                ],
                ruleCustom : {
                    yearDate: [{ required: true, message: '  ', trigger: 'blur',type:'date' }],
                    project: [{ required: true, message: '  ', trigger: 'blur' }],
                    seqNo: [{ required: true, message: '  ', trigger: 'blur' }],
                    content: [{ required: true, message: '  ', trigger: 'blur' }],
                    standard: [{ required: true, message: '  ', trigger: 'blur' }]
                },
                projectList: '',
                // api
                queryUrl:Api.queryEnStdStandard,
                exportUrl:Api.exportEnStdStandard,
                deleteUrl:Api.deleteEnStdStandard,
                updateUrl:Api.updateEnStdStandard,
                saveUrl:Api.saveEnStdStandard,
                industryNames: [],
                twoLevel:[],
            }
        },
        mounted() {
            this.dataToQuery.year1 = new Date()
            this.dataToQuery.year = new Date().getFullYear().toString()
            this.setTableHeight();
            this.selectCodingSort();
            this.query();
            this.$http.get(Api.queryIndustryName, {params: {belongOrgId:this.currentUser.twoLevelOrgId}}).then((res) => {
                this.industryNames = res.data.data.map(m=>m['industryName']);
                this.industryNames = [...new Set(this.industryNames)]
            });
            this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
                this.twoLevel=res.data.data
            }).catch(e => {
            })
        },
        methods: {
            ...pageCommonFunction,
            deleteData(params) {
                params.row.id = params.row.itemId
                this.deleteDateAjax(params);
            },
            belongChange(value) {
                this.dataToView.belongOrgId = value.value
                this.dataToView.belongOrgName = value.label
            },
            selectCodingSort() {
                this.$http.get(Api.queryEnStdStandardProject, {params: {}}).then((res) => {
                    this.projectList = res.data.data.projectList;
                });
            },
            reset1(){
                this.dataToQuery = {
                    year1: new Date(),
                    year : new Date().getFullYear().toString()
                };
                this.pagedata.currentPage=1
                this.query()
            },
            query() {
                this.dataToQuery.curCompanyId = this.currentUser.companyId;
                this.queryAjax()
            },
            submit(name) {
                if(this.dataToView.yearDate) {
                    this.dataToView.year = this.dataToView.yearDate.getFullYear();
                }
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    yearDate:new Date(),
                }
            },
            async beforeEditDialogOpen(data) {
                data.row.yearDate = new Date(data.row.year + '-01-01');
            },
        },
        watch:{
        },
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
</style>
